<template>
  <div class="app-container home">
    <h3 style="text-align: center">{{ this.name }}主要安全管理人员变更信息</h3>
    <searchForm
      class="searchMain"
      size="medium"
      :isHandle="isHandle"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :search-data="searchData"
      :search-form="searchForm"
      :search-handle="searchHandle"
    ></searchForm>
    <el-row style="margin-bottom: 20px">
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="newlyForm"
        v-hasPermi="['mineManage:manager:add']"
        >新增</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-download"
        @click="handleExport"
        v-hasPermi="['mineManage:manager:export']"
        >导出</el-button
      >
    </el-row>
    <tableForm
      :columObj="columObj"
      :pageObj="pageObj"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <template v-slot:operation="scopeVal">
        <el-button
          type="text"
          size="medium"
          @click="edit(scopeVal.scope.row)"
          v-hasPermi="['mineManage:manager:edit']"
          >更新</el-button
        >
        <el-button
          type="text"
          size="medium"
          @click="detail(scopeVal.scope.row)"
          v-hasPermi="['mineManage:manager:query']"
          >详情</el-button
        >
      </template>
    </tableForm>

    <!-- 弹框 -->
    <baseDialog
      :popObj="popObj"
      @cancelPop="cancelPop"
      @confirmPop="confirmPop"
    >
      <baseForm
        ref="addForm"
        :source="addFormData"
        :config="addConfig()"
        :rules="addFormRules"
      >
      </baseForm>
    </baseDialog>
  </div>
</template>
    
  <script>
import tableForm from "../../components/baseTable/index.vue";
import searchForm from "../../components/baseSearchForm/index.vue";
import baseForm from "../../components/baseForm/index.vue";
import baseDialog from "../../components/baseDialog/index.vue";
import {
  listManager,
  addManager,
  getManager,
  updateManager,
} from "@/api/manager";
import { dateTypeFormat, formatTime } from "../../utils/index";

export default {
  name: "Index",
  components: {
    tableForm,
    searchForm,
    baseForm,
    baseDialog,
  },
  data() {
    return {
      isHandle: true,
      labelWidth: "100px",
      labelPosition: "right",
      name: "砂墩子",
      searchData: {
        // 查询参数
        mineName: "",
        mineManager: "",
        dataTime: [
          // dateTypeFormat(
          //   "YYYY-mm-dd",
          //   new Date(new Date().getFullYear(), new Date().getMonth(), 1)
          // ),
          // dateTypeFormat("YYYY-mm-dd", new Date()),
        ],
      },
      searchForm: [
        {
          type: "Input",
          label: "矿名称：",
          prop: "mineName",
          placeholder: "请输入",
          disabled: true,
        },
        {
          type: "Input",
          label: "矿长：",
          prop: "mineManager",
          placeholder: "请输入",
        },
        {
          type: "daterange",
          label: "任职日期：",
          prop: "dataTime",
          placeholder: "请选择",
        },
      ],
      searchHandle: [
        // {
        //   label: "新增",
        //   type: "plain",
        //   icon: "el-icon-plus",
        //   handle: this.newlyForm,
        //   hasPermi:"['mineManage:manager:add']"
        // },
        {
          label: "查询",
          type: "primary",
          icon: "el-icon-search",
          handle: this.handleSearch,
        },
        // {
        //   label: "导出",
        //   type: "primary",
        //   icon: "el-icon-download",
        //   handle: this.handleExport,
        //   hasPermi:"['mineManage:manager:export']"
        // },
      ],
      columObj: {
        // 选择框
        loading: false, //是否加载
        isSerial: true, //是否需要序列
        isSelect: false, //是否需要复选框
        isPagination: true, //是否需要分页
        isOperation: true, //是否需要操作栏
        tableData: [], //表格数据来源
        tableCol: [
          {
            label: "矿长",
            prop: "mineManager",
          },
          {
            label: "矿名称",
            prop: "mineName",
          },
          {
            label: "任职开始时间",
            prop: "startTime",
            // ownDefined: true,
            // ownDefinedReturn: (row, $index) => {
            //   if (row.startTime == 0) {
            //     return "1970-01-01";
            //   } else {
            //     return formatTime(row.startTime, "yyyy.MM.dd");
            //   }
            // },
            btnClick: () => {},
          },
          {
            label: "任职结束时间",
            prop: "endTime",
            // ownDefined: true,
            // ownDefinedReturn: (row, $index) => {
            //   if (row.endTime == 0) {
            //     return "1970-01-01 ";
            //   } else {
            //     return formatTime(row.endTime, "yyyy.MM.dd");
            //   }
            // },
            btnClick: () => {},
          },
          {
            label: "身份证号",
            prop: "identityCard",
          },
          {
            label: "联系方式",
            prop: "contactNum",
          },
          {
            label: "学历",
            prop: "record",
          },
          {
            label: "院校",
            prop: "educational",
          },
        ],
      },
      pageObj: {
        //分页对象
        total: 0,
        pageData: {
          pageNum: 1,
          pageSize: 13,
        },
      },
      popObj: {
        popName: "addFOrm",
        dialogTitle: "更新",
        dialogVisible: false,
        popupWidth: "1000px",
        showFooter: true,
      },
      addFormData: {
        mineManager: "",
        mineName: "",
        startTime: "",
        endTime: "",
        identityCard: "",
        contactNum: "", //
        record: "",
        educational: "",
        professional: "",
        fileNumber: "",
        previousEmployersPositions: "",
        id: "",
      },
      addFormRules: {
        mineManager: [
          { required: true, message: "请输入矿长", trigger: "blur" },
        ],
        mineName: [{ required: true, message: "请输入矿", trigger: "blur" }],
        startTime: [
          { required: true, message: "请选择任职开始日期", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择任职结束日期", trigger: "blur" },
        ],
        identityCard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            pattern:
              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur",
          },
        ],
        contactNum: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: "联系方式格式有误！",
            trigger: "blur",
          },
        ],
        record: [{ required: true, message: "请输入学历", trigger: "blur" }],
        educational: [
          { required: true, message: "请输入院校", trigger: "blur" },
        ],
        professional: [
          { required: true, message: "请输入职称", trigger: "blur" },
        ],
        fileNumber: [
          { required: true, message: "请输入任免文件号", trigger: "blur" },
        ],
        previousEmployersPositions: [
          {
            required: true,
            message: "请输入历任任职单位及职务",
            trigger: "blur",
          },
        ],
      },
      addConfig() {
        return [
          {
            key: "mineManager",
            label: "矿长：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入矿长",
              clearable: true,
            },
            tips: "<template slot='append'>.com</template>",
          },
          {
            key: "mineName",
            label: "矿：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入矿",
              clearable: true,
              // suffixIcon:"el-icon-date",
            },
            disabled: true,
          },
          {
            key: "startTime",
            label: "任职开始时间：",
            component:
              this.popObj.dialogTitle == "详情"
                ? "innerText"
                : "el-date-picker",
            span: 12,
            props: {
              placeholder: "请选择任职开始时间",
              clearable: true,
            },
          },
          {
            key: "endTime",
            label: "任职结束时间：",
            component:
              this.popObj.dialogTitle == "详情"
                ? "innerText"
                : "el-date-picker",
            span: 12,
            props: {
              placeholder: "请选择任职结束时间",
              clearable: true,
            },
          },
          {
            key: "identityCard",
            label: "身份证号码：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入身份证号码",
              clearable: true,
            },
          },
          {
            key: "contactNum",
            label: "联系方式：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入联系方式",
              clearable: true,
            },
          },
          {
            key: "record",
            label: "学历：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入学历",
              clearable: true,
            },
          },
          {
            key: "educational",
            label: "院校：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入院校",
              clearable: true,
            },
          },
          {
            key: "professional",
            label: "职称：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入职称",
              clearable: true,
            },
          },
          {
            key: "fileNumber",
            label: "任免文件号：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入任免文件号",
              clearable: true,
            },
          },
          {
            key: "previousEmployersPositions",
            label: "历任任职单位及职务：",
            component:
              this.popObj.dialogTitle == "详情" ? "innerText" : "el-input",
            span: 12,
            props: {
              placeholder: "请输入历任任职单位及职务",
              clearable: true,
            },
            type: "textarea",
          },
        ];
      },
    };
  },
  created() {
    if (this.$route.query.mine) {
      this.searchData.mineName = this.$route.query.mine;

      this.name = this.$route.query.mine;
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 获取数据列表
    getList() {
      try {
        let params = {
          pageNum: this.pageObj.pageData.pageNum,
          pageSize: this.pageObj.pageData.pageSize,
          mineName: this.searchData.mineName,
          mineManager: this.searchData.mineManager,
          startTime: this.searchData.dataTime[0],
          endTime: this.searchData.dataTime[1],
        };
        listManager(params).then((res) => {
          this.columObj.tableData = res.rows;
          this.pageObj.total = res.total;
        });
      } catch (error) {
        console.log(error);
      }
    },
    resetSearchForm() {
      console.log(this.$data.searchForm);
      Object.assign(this.$data.searchForm, this.$options.data().searchForm);
    },
    resetAddForm() {
      Object.assign(this.$data.addFormData, this.$options.data().addFormData);
    },
    handleCurrentChange(val) {
      this.pageObj.pageData.pageNum = val;
      this.pageObj.pageData.pageSize = 10;
      this.getList();
    },
    //条数变化
    handleSizeChange(val) {
      this.pageObj.pageData.pageSize = val;
      this.pageObj.pageNum = 1;
      this.getList();
    },
    edit(row) {
      // this.resetAddForm();
      this.popObj.dialogTitle = "更新";
      this.popObj.showFooter = true;
      this.popObj.dialogVisible = true;
      try {
        getManager(row.id).then((res) => {
          this.addFormData = { ...res.data };
        });
      } catch (error) {
        console.log(error);
      }
    },
    detail(row) {
      this.popObj.dialogTitle = "详情";
      this.popObj.showFooter = false;
      this.popObj.dialogVisible = true;
      try {
        getManager(row.id).then((res) => {
          this.addFormData = { ...res.data };
        });
      } catch (error) {
        console.log(error);
      }
    },
    cancelPop() {
      this.popObj.dialogVisible = false;
      this.$refs.addForm.$refs.form.resetFields();
      this.$refs.addForm.clearValidate();
    },
    async confirmPop() {
      const valid = await this.$refs.addForm.validate();
      if (valid) {
        if (this.popObj.dialogTitle === "更新") {
          updateManager(this.addFormData).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.popObj.dialogVisible = false;
            this.getList();
          });
        } else {
          addManager({ ...this.addFormData }).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.popObj.dialogVisible = false;
            this.getList();
          });
        }
      }
    },
    handleSearch() {
      this.pageObj.pageData.pageNum = 1;
      this.getList();
    },
    newlyForm() {
      this.resetAddForm();
      this.popObj.dialogTitle = "新增";
      this.popObj.showFooter = true;
      this.addFormData.mineName = this.$route.query.mine;
      this.popObj.dialogVisible = true;
    },
    handleExport() {
      let params = {
        pageNum: this.pageObj.pageData.pageNum,
        pageSize: this.pageObj.pageData.pageSize,
        mineName: this.searchData.mineName,
        mineManager: this.searchData.mineManager,
        startTime: this.searchData.dataTime[0],
        endTime: this.searchData.dataTime[1],
      };
      this.download(
        "mineManage/manager/export",
        {
          params,
          title: `${this.name}主要安全管理人员变更信息`,
        },
        `manager_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
    
    <style scoped lang="scss">
</style>
    
    